<!-- control bar -->
<div>
  <ion-range min="0" max="{{ duration }}" (ngModelChange)="changePosition($event)" [(ngModel)]="position">
    [disabled]="true"
    <ion-label class="duration-time" slot="start">{{ position * 1000 | date : 'mm:ss' }}</ion-label>
    <ion-label class="duration-time" slot="end" *ngIf="duration !== -1">{{ duration * 1000 | date : 'mm:ss' }}</ion-label>
  </ion-range>
</div>
<ion-grid>
  <audio preload="auto" #audio></audio>
  <ion-row class="ion-align-items-center" style="height: 100%">
    <ion-col>
      <!-- Backwards -->
      <ion-fab-button class="btn" color="primary" [disabled]="playing" (click)="goto('back')">
        <ion-icon src="/assets/ios-skip-backward.svg"></ion-icon>
      </ion-fab-button>
      <ion-fab-button class="btn" color="primary" [disabled]="!isReady || !isInPlay" (click)="controlSeconds('back')">
        <ion-icon src="/assets/ios-rewind.svg"></ion-icon>
      </ion-fab-button>
    </ion-col>
    <ion-col>
      <!-- Play/Pause -->
      <ion-fab-button class="play-pause-btn" (click)="play()" color="primary" *ngIf="!playing" [disabled]="!isReady">
        <ion-icon name="play"></ion-icon>
      </ion-fab-button>
      <ion-fab-button class="play-pause-btn" (click)="pause()" color="secondary" *ngIf="playing" [disabled]="!isReady || !isInPlay">
        <ion-icon name="pause"></ion-icon>
      </ion-fab-button>
    </ion-col>
    <ion-col>
      <!-- Forwards -->
      <ion-fab-button class="btn" color="primary" [disabled]="!isReady || !isInPlay" (click)="controlSeconds('forward')">
        <ion-icon src="/assets/ios-fastforward.svg"></ion-icon>
      </ion-fab-button>
      <ion-fab-button class="btn" color="primary" [disabled]="playing" (click)="goto('forward')">
        <ion-icon src="/assets/ios-skip-forward.svg"></ion-icon>
      </ion-fab-button>
    </ion-col>
  </ion-row>
</ion-grid>
